Widget load improvements by 00salmon · Pull Request #479 · saasquatch/program-tools

Sam Beveridge (00salmon) · 2026-02-20T21:05:04Z

Description of the change

Description here

Type of change

Bug fix (non-breaking change that fixes an issue)
New feature (non-breaking change that adds functionality)
Breaking change (fix or feature that would cause existing functionality to not work as expected)
Documentation or Development tools (readme, specs, tests, code formatting)

Links

Jira issue number: (PUT IT HERE)
Process.st launch checklist: (PUT IT HERE)

Checklists

Development

Prettier was run (if applicable)
The behaviour changes in the pull request are covered by specs
All tests related to the changed code pass in development

Paperwork

This pull request has a descriptive title and information useful to a reviewer
This pull request has a Jira number
This pull request has a Process.st launch checklist

Code review

Changes have been reviewed by at least one other engineer
Security impacts of this change have been considered

Copilot

Pull request overview

This PR implements widget load improvements through the introduction of a custom skeleton component and updates to the tax and cash dashboard to support additional payout hold states.

Changes:

Introduced a new customizable sqm-skeleton component to replace sl-skeleton throughout the codebase
Added support for additional payout hold states (payment on hold, beneficiary name issues, withdrawal settings invalid, payment returned)
Enhanced sqm-header-logo component to support text-based logos as a fallback to images

Reviewed changes

Copilot reviewed 73 out of 75 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
packages/mint-components/src/components/sqm-skeleton/sqm-skeleton.tsx	New skeleton component with customizable width, height, and theming support
packages/mint-components/src/global/styles.ts	Added CSS variables for skeleton background and animation colors
packages/mint-components/src/components/tax-and-cash/sqm-payout-status-alert/usePayoutStatus.ts	Added new payout status types and logic for handling additional hold reasons
packages/mint-components/src/components/tax-and-cash/sqm-tax-and-cash/sqm-tax-and-cash.tsx	Updated button labels for consistency and added new alert message properties
packages/mint-components/src/components/sqm-form-message/sqm-form-message.tsx	Added loading state support using the new skeleton component
packages/mint-components/src/components/sqm-header-logo/sqm-header-logo.tsx	Added text-based logo support with customizable size and color
packages/mint-components/CHANGELOG.md	Documents changes to payout alert copy and header logo functionality

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

packages/mint-components/src/index.html

+            c["_" + a].ready.push(b);
+          }),
+          (e = document.createElement("script")),
+          (e.async = 1),


Copilot

Pull request overview

Copilot reviewed 81 out of 83 changed files in this pull request and generated 6 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-02-20T21:17:16Z

packages/mint-components/src/components/sqm-skeleton/sqm-skeleton.tsx

+   */
+  @Prop() width?: string = "100%";
+
+  disconnectedCallback() {}


The disconnectedCallback method is empty and serves no purpose. Remove this method to improve code clarity.

Copilot · 2026-02-20T21:17:16Z

packages/mint-components/src/components/sqm-skeleton/sqm-skeleton.tsx

@@ -0,0 +1,51 @@
+import { h, Component, State, Prop, Host } from "@stencil/core";


The Host import is added but not used in the component. The render method returns a div instead of using Host. Either use Host as the root element or remove the unused import.

Copilot · 2026-02-20T21:17:17Z

packages/mint-components/src/index.html

+<html>
+  <head>
+    <script>
+      !(function (a, b) {
+        a("squatch", "http://localhost:3333/squatch.min.js", b);
+      })(function (a, b, c) {
+        var d, e, f;
+        (c["_" + a] = {}),
+          (c[a] = {}),
+          (c[a].ready = function (b) {
+            c["_" + a].ready = c["_" + a].ready || [];
+            c["_" + a].ready.push(b);
+          }),
+          (e = document.createElement("script")),
+          (e.async = 1),
+          (e.src = b),
+          (f = document.getElementsByTagName("script")[0]),
+          f.parentNode.insertBefore(e, f);
+      }, this);
+    </script>
+    <script>
+      window.squatchTenant = "ac52kfybp1tkr";
+      window.squatchConfig = {
+        domain: "https://staging.referralsaasquatch.com",
+      };
+      window.squatchToken =
+        "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6IklSTVhzWXk2WVlxcTQ2OTQzN21HOEVSUXQ4UW9LRkJhRzEifQ.eyJ1c2VyIjp7ImlkIjoidGVzdHVzZXIiLCJhY2NvdW50SWQiOiJ0ZXN0dXNlciIsImVtYWlsIjoidGVzdHVzZXJAZXhhbXBsZS5jb20ifX0.tegzTaLms4g47rwcWoyhk1WW4hqB16PulQV9zouJNfU";
+      window.widgetIdent = {
+        programId: "41863",
+        userId: "testuser",
+        accountId: "testuser",
+        token:
+          "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6IklSTVhzWXk2WVlxcTQ2OTQzN21HOEVSUXQ4UW9LRkJhRzEifQ.eyJ1c2VyIjp7ImlkIjoidGVzdHVzZXIiLCJhY2NvdW50SWQiOiJ0ZXN0dXNlciIsImVtYWlsIjoidGVzdHVzZXJAZXhhbXBsZS5jb20ifX0.tegzTaLms4g47rwcWoyhk1WW4hqB16PulQV9zouJNfU",
+        tenantAlias: "ac52kfybp1tkr",
+        engagementMedium: "EMBED",
+        appDomain: "https://staging.referralsaasquatch.com",
+      };
+    </script>
+  </head>
+  <body>
+    <impact-embed widget="p/41863/w/referrerWidget"
+      ><div>Loading...</div></impact-embed
+    >
+  </body>
+</html>


The index.html file has been completely replaced with test/demo content that includes hardcoded credentials and tokens. This appears to be intended for development/testing purposes only and should not be committed to the repository. This file should either be reverted to its original stencilbook content or added to .gitignore if it's meant to be a local test file.

Copilot · 2026-02-20T21:17:17Z

packages/mint-components/package.json

  },
  "devDependencies": {
-    "@formatjs/intl": "1.8.4",
+    "@formatjs/intl": "^3.1.8",


The @formatjs/intl dependency is being upgraded from version 1.8.4 to ^3.1.8, which is a major version jump (from v1 to v3). This is a potentially breaking change that could introduce compatibility issues. Ensure that this upgrade has been tested thoroughly and that all formatMessage calls throughout the codebase remain compatible with the new version.

Suggested change

"@formatjs/intl": "^3.1.8",

"@formatjs/intl": "1.8.4",

Copilot · 2026-02-20T21:17:17Z

packages/bedrock-components/stencil.config.ts

+  namespace: "bedrock-components",
  buildEs5: true,
-  globalScript: 'src/global/global.ts',
+  globalScript: "src/global/global.ts",


Setting hydratedFlag: null in bedrock-components explicitly disables the hydration flag feature. For consistency across the monorepo and to ensure similar widget load behavior, consider whether bedrock-components should also use the same hydratedFlag configuration as mint-components, or document why they differ.

Suggested change

globalScript: "src/global/global.ts",

globalScript: "src/global/global.ts",

// Note: We explicitly disable Stencil's hydration flag for bedrock-components.

// This differs from mint-components and is intentional to preserve existing

// widget load behavior and DOM markup expectations in consumers.

Copilot · 2026-02-20T21:17:18Z

packages/mint-components/src/components/sqm-skeleton/sqm-skeleton.tsx

+  @State()
+  ignored = true;


The ignored state variable is declared but never used in the component. This appears to be unnecessary code that should be removed to improve maintainability.

Copilot

Pull request overview

Copilot reviewed 97 out of 99 changed files in this pull request and generated 7 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-02-27T23:54:48Z

packages/mint-components/src/components/tax-and-cash/sqm-tax-and-cash/sqm-tax-and-cash.tsx

+            loadingErrorAlertDescription={
+              intl.formatMessage(
+                {
+                  id: "loadingErrorAlertDescription",
+                  defaultMessage: this.loadingErrorAlertDescription,
+                },
+                {
+                  supportLink: (
+                    <a
+                      target="_blank"
+                      href={`mailto:advocate-support@impact.com`}
+                    >
+                      {this.supportLink}
+                    </a>
+                  ),
+                }
+              ) as string
+            }


Casting intl.formatMessage(...) to string here hides a real mismatch: you’re passing a Stencil <a> VNode as supportLink, but @formatjs/intl message formatting is string-based and will typically stringify objects (e.g. [object Object]). Consider rendering the support link outside of formatMessage (split into text + <a>), or change the error view/formatter approach so rich content is supported without unsafe casts.

Copilot · 2026-02-27T23:54:48Z

packages/mint-components/src/components/sqm-qr-code/sqm-qr-code.tsx

  return deepmerge(
    {
      dialogIsOpen,
      hideTitle: props.hideTitle,
      showDialog: () => setDialog(true),
      hideDialog: () => setDialog(false),
+      loading: true,
      titleText: props.titleText,
      viewCodeText: props.viewCodeText,


In the demo props, loading: true means the QR code demo will always render the loading skeleton and never show the actual QR image. If the intent is to show a loaded QR code by default, set loading to false (and let demoData override it when you want to demo the loading state).

Copilot · 2026-02-27T23:54:48Z

packages/mint-components/src/index.html

+    <script>
+      window.squatchTenant = "ac52kfybp1tkr";
+      window.squatchConfig = {
+        domain: "https://staging.referralsaasquatch.com",
+      };
+      window.squatchToken =
+        "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6IklSTVhzWXk2WVlxcTQ2OTQzN21HOEVSUXQ4UW9LRkJhRzEifQ.eyJ1c2VyIjp7ImlkIjoidGVzdHVzZXIiLCJhY2NvdW50SWQiOiJ0ZXN0dXNlciIsImVtYWlsIjoidGVzdHVzZXJAZXhhbXBsZS5jb20ifX0.tegzTaLms4g47rwcWoyhk1WW4hqB16PulQV9zouJNfU";
+      window.widgetIdent = {
+        programId: "41863",
+        userId: "testuser",
+        accountId: "testuser",
+        token:
+          "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6IklSTVhzWXk2WVlxcTQ2OTQzN21HOEVSUXQ4UW9LRkJhRzEifQ.eyJ1c2VyIjp7ImlkIjoidGVzdHVzZXIiLCJhY2NvdW50SWQiOiJ0ZXN0dXNlciIsImVtYWlsIjoidGVzdHVzZXJAZXhhbXBsZS5jb20ifX0.tegzTaLms4g47rwcWoyhk1WW4hqB16PulQV9zouJNfU",
+        tenantAlias: "ac52kfybp1tkr",
+        engagementMedium: "EMBED",
+        appDomain: "https://staging.referralsaasquatch.com",
+      };


src/index.html now contains hard-coded tenant identifiers and JWT-like tokens (window.squatchToken, widgetIdent.token) plus a staging domain. These values are credentials and shouldn’t be committed; they can be harvested from the repo or from built artifacts. Replace them with placeholders and load local dev config from env/localStorage/query params (or a gitignored file) instead.

Copilot · 2026-02-27T23:54:48Z

packages/mint-components/stencil.config.ts

+  hydratedFlag: {
+    hydratedValue: "inherit!important",
+    initialValue: "hidden",
+    name: "hydrated",
+    property: "visibility",
+    selector: "class",
+  },


hydratedValue: "inherit!important" is not valid CSS (it will be emitted as visibility: inherit!important; which browsers ignore). That can leave components stuck at visibility: hidden even after hydration. Use a valid value like "inherit" or "visible" (and if you truly need !important, apply it via CSS rather than embedding it into the value string).

Copilot · 2026-02-27T23:54:49Z

packages/mint-components/src/components/sqm-skeleton/sqm-skeleton.tsx

+  vanillaStyle = `
+  sl-skeleton::part(indicator) {
+    --sheen-color: var(--sqm-skeleton-animation-background);
+    --color: var(--sqm-skeleton-background);
+    border-radius: var(--sqm-border-radius-normal);
+  }
+
+  sl-skeleton::part(base) {
+    height:${this.height};
+    width:${this.width};
+  }


vanillaStyle is computed once as a class field using this.height/this.width, so if height/width props change, the rendered CSS won’t update. Make the style string derive from current props (e.g., a getter used in render()), or set CSS variables on the host/inner element and reference those in the stylesheet.

Copilot · 2026-02-27T23:54:49Z

packages/mint-components/src/components/sqm-form-message/sqm-form-message.tsx

+   *
+   * @uiName Loading
+   */
+  @Prop() loading: boolean = false;


@Prop() loading: boolean = false; causes the generated component type (Components.SqmFormMessage) to require a loading attribute, even though it has a default. To avoid breaking TS/JSX consumers, make this prop optional (e.g., loading?: boolean = false) so the generated typings don’t require it.

Suggested change

@Prop() loading: boolean = false;

@Prop() loading?: boolean = false;

Copilot · 2026-02-27T23:54:49Z

packages/mint-components/src/components/sqm-lead-form/sqm-lead-form-view.tsx

-              type="danger"
-              class={sheet.classes.ErrorAlertContainer}
-              open
+              type="error"


This <sl-alert> is missing the open attribute, so it won’t render visibly. Also type="error" is inconsistent with the rest of the codebase (other error alerts use type="danger"). Set open and use the correct type value so the error state is actually shown to users.

Suggested change

type="error"

type="danger"

open

Zach Harrison (zachharrison) and others added 17 commits November 14, 2025 11:24

Update leaderboard loading style

6a59ee1

cleaing up some imports

fbfe8fe

upgrade formatjs version

ebb4c02

Add loading state for form message component

4a575b2

Add re-usable skeleton component

ddd68f6

Pass loading prop to form-message instances

274c80b

Merge branch 'community-experts' into widget-load

0fd76b3

Re build after merge

4b50160

Fix payout status alert buttons

4981c8e

Refactor all skeletons to use standard component

5298f88

fiddling with bundling

d99a9a0

Publish new pre release

7fecfd4

Update demo data for testing

f7300cf

Update loading state in rewrds table

5f85807

Hard code QR code loading state

e874f83

New pre release

54621f7

Delete console.log

ff1e714

Copilot AI review requested due to automatic review settings February 20, 2026 21:05

Copilot started reviewing on behalf of Sam Beveridge (00salmon) February 20, 2026 21:05 View session

Copilot AI reviewed Feb 20, 2026

View reviewed changes

Sam Beveridge (00salmon) added 2 commits February 20, 2026 13:09

Merge branch 'master' into widget-load

516546e

Merge branch 'widget-improvements' into widget-load

bfdc903

Copilot AI review requested due to automatic review settings February 20, 2026 21:12

Copilot started reviewing on behalf of Sam Beveridge (00salmon) February 20, 2026 21:12 View session

github-advanced-security bot found potential problems Feb 20, 2026

View reviewed changes

packages/mint-components/src/index.html

c["_" + a].ready.push(b);

}),

(e = document.createElement("script")),

(e.async = 1),

Check warning

Code scanning / CodeQL

Inclusion of functionality from an untrusted source Medium

Script loaded using unencrypted connection.

Copilot AI reviewed Feb 20, 2026

View reviewed changes

Zach Harrison (zachharrison) and others added 2 commits February 26, 2026 14:13

Merge master and publish pre release

70f0ee6

replace "Anonymous User" with "Your Friend" for referral / reward tables

be30188

Copilot AI review requested due to automatic review settings February 27, 2026 23:49

Copilot started reviewing on behalf of Sam Beveridge (00salmon) February 27, 2026 23:50 View session

Copilot AI reviewed Feb 27, 2026

View reviewed changes

		@@ -0,0 +1,51 @@
		import { h, Component, State, Prop, Host } from "@stencil/core";

-  globalScript: "src/global/global.ts",
+  globalScript: "src/global/global.ts",
+  // Note: We explicitly disable Stencil's hydration flag for bedrock-components.
+  // This differs from mint-components and is intentional to preserve existing
+  // widget load behavior and DOM markup expectations in consumers.

	@Prop() loading: boolean = false;
	@Prop() loading?: boolean = false;

Conversation

Sam Beveridge (00salmon) commented Feb 20, 2026

Description of the change

Type of change

Links

Checklists

Development

Paperwork

Code review

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Check warning

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Feb 20, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 20, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 20, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 20, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 20, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 20, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Feb 27, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 27, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 27, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 27, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 27, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 27, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 27, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Milestone

Development

Uh oh!

3 participants